<script setup>
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
// import { toast } from '@/uni_modules/uview-plus'
import { reactive } from 'vue'
// 全局数据
const data = reactive({
  list: [],
  page: 1,
  status: 'loadmore',
  showModal: false
})
// 首次加载
onLoad(options => {
  getList()
})
// 监听页面滚动到底部
onReachBottom(() => {
  getList()
})
// 查询列表
function getList() {
  // console.log('优惠券页面', data.page)
  if (data.page >= 3) return
  data.status = 'loading'
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      data.list.push({
        imageUrl: 'https://cdn.uviewui.com/uview/goods/2.jpg',
        name: '商品名称商品名称商品名称商品名称商品名称商品名称',
        spec: '规格：1箱8瓶',
        num: '2',
      })
    }
    data.page++
    data.status = data.page >= 3 ? 'nomore' : 'loadmore'
  }, 2000);
}
// 提交解锁
const submit = () => {
  // toast('解锁成功')
  data.showModal = false
}
</script>

<template>
  <view class="goods-prize-page">
    <!-- 空状态 -->
    <up-empty v-if="data.list.length <= 0" mode="list" text="暂无待解锁物品" marginTop="200rpx"></up-empty>
    <view v-else class="list">
      <view class="item" v-for="(item, i) in data.list" :key="i">
        <view class="img-box">
          <image style="width: 168rpx; height: 168rpx;" :src="item.imageUrl" mode="scaleToFill" />
        </view>
        <view class="info">
          <view class="name up-line-2">
            <text>{{ item.name }}</text>
          </view>
          <view class="spec up-line-2">
            <text>{{ item.spec }}</text>
          </view>
          <view class="num">
            <text>数量: x{{ item.num }}</text>
          </view>
        </view>
      </view>

      <!-- 加载更多 -->
      <up-loadmore :status="data.status" :loading-text="`努力加载中`" :loadmore-text="'加载更多'" :nomore-text="'没有更多了'" />
    </view>
    <!-- 底部栏 -->
    <view class="bottom-bar">
      <view class="content">
        <up-button text="一元解锁" type="primary" shape="circle" @click="data.showModal = true"></up-button>
      </view>
    </view>

    <!-- 解锁确认弹窗 -->
    <up-modal :show="data.showModal" width="540rpx" contentTextAlign="center" title="解锁奖池" confirmText="1元解锁"
      confirmColor="#FF7A00" :showCancelButton="true" cancelText="放弃" cancelColor="#929397"
      @cancel="data.showModal = false" @confirm="submit" :asyncClose="true">
      <view class="modal-content">
        <text>您可通过“商城”-“幸运盲盒”抽奖获得奖品并存入此处，您仅需花费1元解锁奖池，即可领取全部奖品（1元解锁，终身可用，无后续费用）</text>
      </view>
    </up-modal>
    <!-- 赠送  -->
  </view>
</template>

<style lang="scss" scoped>
.goods-prize-page {
  box-sizing: border-box;
  padding: 28rpx 32rpx;
  padding-bottom: 182rpx;
  min-height: 100vh;
  background-color: #F9F9F9;

  // 列表
  .list {
    & .item {
      display: flex;
      margin-bottom: 20rpx;
      background: #FFFFFF;
      border-radius: 12rpx;
      padding: 28rpx;

      // 商品图片
      & .img-box {
        width: 168rpx;
        height: 168rpx;
        overflow: hidden;
        border-radius: 10rpx;
      }

      // 商品信息
      & .info {
        margin-left: 16rpx;
        width: 446rpx;

        & .name {
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }

        & .spec {
          margin-top: 16rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #9B9B9B;
        }

        & .num {
          margin-top: 8rpx;
          font-weight: 400;
          font-size: 24rpx;
          color: #9B9B9B;
        }
      }
    }
  }

  // 底部栏
  & .bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 172rpx;
    background: #FFFFFF;
    border-top: 1rpx solid #E9E9EB;

    & .content {
      box-sizing: border-box;
      padding: 12rpx 40rpx;

      &::v-deep .u-button {
        height: 88rpx;
        font-weight: 500;
        font-size: 32rpx;
        color: #FFFFFF;
        background: #FFA618;
        border-radius: 112rpx;
        border: none;

      }
    }
  }

  // 弹窗内容
  & .modal-content {
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
    text-align: center;
    line-height: 40rpx;
  }
}
</style>